import React from "react";
import uuid from 'uuid/v4';
import {DraggableComponent, IComponent} from "@bastet/widgets";
import './style.less';


interface IBuilderWidgetPanelProps {
  className?: string,
  widgets: Map<string, IComponent>
}
export const BuilderWidgetPanel = ({ className, widgets }: IBuilderWidgetPanelProps) => {
  // console.log('BuilderWidgetPanel: => ', widgets.entries())
  return (
    <div className="builder-draggables">
      <div className="control-bar">组件</div>
      {
        [...widgets.entries()].map(([name, { settings/*, default: Comp*/ }]: any) => {
          // const __settings = resizeCustom(settings)
          // console.log('BuilderWidgetPanel: => ', settings, Comp)
          return (
            <DraggableComponent
              className={`widget-panel-selector ${className}`}
              key={uuid()}
              data={settings}
            >
              {/*<Comp
                  path="xxxxx"
                  widgets={widgets}
                  data={settings}
                  style={{ width: '100%', height: '100%'}}
                  activePath={'activePath'}
                  dispatch={() => {}}

                  onClick={() => {}}
                  onDrop={() => {}}
              >
                {[() => null,() => null,() => null,]}
              </Comp>*/}
              {/*<AccessAlarm color="primary"/>
              <AccessAlarmOutlined color="primary"/>*/}
              {/*<Icon>add_circle</Icon>*/}
              <div className="widget-panel-image" style={{  }}/>
              <span className="widget-panel-label">{ name }</span>
            </DraggableComponent>
          )
        })
      }
    </div>
  )
}